//该文件用于创建vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'
import user from './user'
import Cookies from 'js-cookie';
Vue.use(Vuex)


// vuex的执行机制是什么？
//   在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法,在 actions
// ⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制

//用于相应组件中的动作
const actions= {
    
}
// 用于操作数据（state）
const mutations={
    handleUserName: (state, user_name) => {
        state.username = user_name
        // 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初 
            // 始值（初始值为空）的情况
        localStorage.setItem('username', user_name)
    },
}
// 用于存储数据
const state={
    username: '' || Cookies.get('username'),
}
// 用于将state中的数据加工
const getters = {
    username: (state) => state.username,
}

// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
    modules:{
        tab
    }
})